import {Component, OnDestroy, OnInit} from "@angular/core";

declare var $: any;
import * as e from "echarts";

@Component({
  template: `
    <div class="title">
      <div class="title_text">{{comptitle}}</div>
    </div>
    <div class="row">
      <div class="col-lg-12">
        <div class="zl">
          <div class="head">
            <span class="color1">设备库存统计</span>
            -
            <span class="color">手持终端总数</span>
            <span class="color marleft">总数：{{sczh}}</span>
          </div>
          <div class="body">
            <div id="sczdzs"></div>
          </div>
        </div>
        <div class="zl">
          <div class="head">
            <span class="color1">设备库存统计</span>
            -
            <span class="color">电子便签总数</span>
            <span class="color marleft">总数：{{dzzh}}</span>
          </div>
          <div class="body">
            <div id="dzbqzs"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-12">
        <div class="zl">
          <div class="head">
            <span class="color1">在线离线统计</span>
            -
            <span class="color">手持终端</span>
            <span class="color marleft">在线总数：{{sczxzh}}</span>
            <span class="color marleft">离线总数：{{sclxzh}}</span>
          </div>
          <div class="body">
            <div id="sczd"></div>
          </div>
        </div>
        <div class="zl">
          <div class="head">
            <span class="color1">在线离线统计</span>
            -
            <span class="color">电子便签</span>
            <span class="color marleft">在线总数：{{dzzxzh}}</span>
            <span class="color marleft">离线总数：{{dzlxzh}}</span>
          </div>
          <div class="body">
            <div id="dzbq"></div>
          </div>
        </div>
      </div>
    </div>
  `,
  styles: [
    ".title{width: 100%;height: auto;padding: 10px; border-bottom: 1px solid #ccc; color: rgb(138 143 151);margin-bottom: 15px;}",
    ".title>.title_text{height: 15px;line-height: 15px;font-size: 15px;  width: auto;border-left: 5px solid #1477F3;padding-left: 10px}",
    ".zl{border: 1px solid #ccc;padding: 10px; border-radius: 2px;position: relative;margin-bottom: 15px}",
    ".head{height:30px;line-height:30px;padding-left:10px;background-color:rgb(206, 232, 255);}",
    ".color{color:rgb(138 143 151);}",
    ".color1{color:rgb(16, 90, 200)}",
    ".marleft{margin-left:50px;}",
    "#sczdzs{width:1580px;height:168px;}",
    "#dzbqzs{width:1580px;height:168px;}",
    "#sczd{width:1580px;height:168px;}",
    "#dzbq{width:1580px;height:168px;}",
  ]
})
export class TjbbSbzlZHComponent implements OnInit, OnDestroy {
  comptitle: string = "设备总览";
  scsbzs: any;
  chart: any;
  dzbqzs: any;
  scsb: any;
  dzbq: any;
  sczh: number = 0;
  dzzh: number = 0;
  sczxzh: number = 0;
  sclxzh: number = 0;
  dzzxzh: number = 0;
  dzlxzh: number = 0;

  dataname: any[] = ["武汉市", "黄石市", "十堰市", "宜昌市", "荆门市", "襄阳市", "鄂州市", "孝感市", "荆州市", "黄冈市", "咸宁市", "随州市", "恩施土家族苗族自治州", "仙桃市", "潜江市", "天门市", "神农架林区"]
  data: any[] = [30, 18, 20, 18, 23, 25, 20, 15, 12, 14, 35, 24, 14, 19, 15, 20, 22]

  initscsbzs(): void {
    this.data.forEach((item) => {
      this.sczh = this.sczh + item;
    })

    const that = this;
    if (this.scsbzs) {
      this.scsbzs.clear();
    } else {
      this.scsbzs = e.init(document.getElementById('sczdzs') as HTMLDivElement);
    }
    const option = {
      color: 'rgb(141, 202, 247)',
      grid: {
        left: '2%',
        right: '2%',
        top: '8%',
        bottom: '0%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          boundaryGap: false,
          data: this.dataname,
          axisLabel: {
            fontSize: 16,
            color: "rgb(138, 143, 151)",
            interval: 0,  // 强制显示所有
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(138, 143, 151,0.5)'
            }
          },
        }
      ],
      yAxis: [
        {
          type: 'value',
          axisLabel: {
            fontSize: 16,
            color: "rgb(138, 143, 151)",
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(138, 143, 151,0.5)'
            }
          },
        }
      ],
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#6a7985'
          }
        }
      },
      series: [
        {
          name: '手持终端总数',
          type: 'line',
          stack: '总量',
          areaStyle: {},
          data: this.data
        }
      ]
    };
    this.scsbzs.setOption(option);
  }

  initdzbqzs(): void {
    this.data.forEach((item) => {
      this.dzzh = this.dzzh + item;
    })
    const that = this;
    if (this.dzbqzs) {
      this.dzbqzs.clear();
    } else {
      this.dzbqzs = e.init(document.getElementById('dzbqzs') as HTMLDivElement);
    }
    const option = {
      color: 'rgb(202, 221, 139)',
      grid: {
        left: '2%',
        right: '2%',
        top: '8%',
        bottom: '0%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          boundaryGap: false,
          data: this.dataname,
          axisLabel: {
            fontSize: 16,
            color: "rgb(138, 143, 151)",
            interval: 0,  // 强制显示所有
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(138, 143, 151,0.5)'
            }
          },
        }
      ],
      yAxis: [
        {
          type: 'value',
          axisLabel: {
            fontSize: 16,
            color: "rgb(138, 143, 151)",
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(138, 143, 151,0.5)'
            }
          },
        }
      ],
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#6a7985'
          }
        }
      },
      series: [
        {
          name: "电子标签总数",
          type: 'line',
          stack: '总量',
          areaStyle: {},
          data: this.data
        }
      ]
    };
    this.dzbqzs.setOption(option);
  }

  initscsb(): void {
    this.data.forEach((item) => {
      this.sczxzh = this.sczxzh + item;
    })
    this.data.forEach((item) => {
      this.sclxzh = this.sclxzh + item;
    })
    const that = this;
    if (this.scsb) {
      this.scsb.clear();
    } else {
      this.scsb = e.init(document.getElementById('sczd') as HTMLDivElement);
    }
    const option = {
      tooltip: {
        show: true,
        trigger: 'axis',
        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
          type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        },
        formatter: function (param) {
          let result = '';
          let axisName = '';
          param.forEach(function (item) {
            axisName = item.axisValue;
            const itemValue = item.marker + item.seriesName + ": " + item.data + "</br>";
            result += itemValue
          });
          const allResult = axisName + "</br>" + result;
          return allResult
        }
      },
      grid: {
        left: '2%',
        right: '2%',
        bottom: '0%',
        top: "17%",
        containLabel: true
      },
      legend: {
        left: "right",
        top: "top",
        itemWidth: 15,
        itemHeight: 15,
        itemGap: 25,
        icon: "rect",
        textStyle: {
          color: "rgb(138, 143, 151)",
          fontSize: 16
        }
      },
      xAxis: [{
        type: 'category',
        data: this.dataname,
        axisLine: {
          lineStyle: {
            color: 'rgba(138, 143, 151,0.5)'
          }
        },
        axisLabel: {
          fontSize: 16,
          color: "rgb(138, 143, 151)",
          interval: 0,  // 强制显示所有
        },
        axisTick: {
          show: false,
          alignWithLabel: false,
        },
        //boundaryGap: false,
      }],
      yAxis: [{
        type: 'value',
        // min: 0,
        // max: 500,
        interval: 100,
        axisLine: {
          lineStyle: {
            color: 'rgba(138, 143, 151,0.5)'
          }
        },
        axisLabel: {
          fontSize: 16,
          color: "rgb(138, 143, 151)",
        },
        splitLine: {
          lineStyle: {
            color: 'rgba(138, 143, 151,0.5)'
          }
        },
        axisTick: {
          show: false,
        }
      }],
      series: [{
        type: "bar",
        name: "离线",
        barWidth: 15,
        itemStyle: {
          color: "rgba(246, 217, 115,0.8)",
        },

        label: {
          show: true,  //数据开启显示
          position: "top", //上方显示
          fontSize: 16,
        },
        //smooth: false, //  0.5 ,  如果是 number 0-1之间， 标识平滑度 越小表示越接近折线段，反之则反
        data: this.data,
      }, {
        type: "bar",
        name: "在线",
        barWidth: 15,
        itemStyle: {
          color: "rgba(255,176,94,0.8)"
        },
        label: {
          show: true,
          position: "top",
          fontSize: 16,
        },
        //smooth: false, //  0.5 ,  如果是 number 0-1之间， 标识平滑度 越小表示越接近折线段，反之则反
        data: this.data
      }]
    };
    this.scsb.setOption(option);
  }

  initdzbq(): void {
    this.data.forEach((item) => {
      this.dzzxzh = this.dzzxzh + item;
    })
    this.data.forEach((item) => {
      this.dzlxzh = this.dzlxzh + item;
    })
    const that = this;
    if (this.dzbq) {
      this.dzbq.clear();
    } else {
      this.dzbq = e.init(document.getElementById('dzbq') as HTMLDivElement);
    }
    const option = {
      tooltip: {
        show: true,
        trigger: 'axis',
        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
          type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        },
        formatter: function (param) {
          let result = '';
          let axisName = '';
          param.forEach(function (item) {
            axisName = item.axisValue;
            const itemValue = item.marker + item.seriesName + ": " + item.data + "</br>";
            result += itemValue
          });
          const allResult = axisName + "</br>" + result;
          return allResult
        }
      },
      grid: {
        left: '2%',
        right: '0%',
        bottom: '0%',
        top: "17%",
        containLabel: true
      },
      legend: {
        left: "right",
        top: "top",
        itemWidth: 15,
        itemHeight: 15,
        itemGap: 25,
        icon: "rect",
        textStyle: {
          color: "rgb(138, 143, 151)",
          fontSize: 16
        }
      },
      xAxis: [{
        type: 'category',
        data: this.dataname,
        axisLine: {
          lineStyle: {
            color: 'rgba(138, 143, 151,0.5)'
          }
        },
        axisLabel: {
          fontSize: 16,
          color: "rgb(138, 143, 151)",
          interval: 0,  // 强制显示所有
        },
        axisTick: {
          show: false,
          alignWithLabel: false,
        },
        //boundaryGap: false,
      }],
      yAxis: [{
        type: 'value',
        // min: 0,
        // max: 500,
        interval: 100,
        axisLine: {
          lineStyle: {
            color: 'rgba(138, 143, 151,0.5)'
          }
        },
        axisLabel: {
          fontSize: 16,
          color: "rgb(138, 143, 151)",
        },
        splitLine: {
          lineStyle: {
            color: 'rgba(138, 143, 151,0.5)'
          }
        },
        axisTick: {
          show: false,
        }
      }],
      series: [{
        type: "bar",
        name: "离线",
        barWidth: 15,
        itemStyle: {
          color: "rgba(155, 229, 238,0.8)"
        },
        label: {
          show: true,
          position: "top",
          fontSize: 16,
        },
        //smooth: false, //  0.5 ,  如果是 number 0-1之间， 标识平滑度 越小表示越接近折线段，反之则反
        data: this.data,
      }, {
        type: "bar",
        name: "在线",
        barWidth: 15,
        itemStyle: {
          color: "rgba(0, 188, 213,0.8)"
        },
        label: {
          show: true,
          position: "top",
          fontSize: 16,
        },
        //smooth: false, //  0.5 ,  如果是 number 0-1之间， 标识平滑度 越小表示越接近折线段，反之则反
        data: this.data
      }]
    };
    this.dzbq.setOption(option);
  }

  constructor() {

  }

  ngOnInit() {
    this.initscsbzs();
    this.initdzbqzs();
    this.initscsb();
    this.initdzbq();
  }

  ngOnDestroy() {

  }

}
